<template>
	<div class="content">
		<div class="left">
			<div class="block">
				<el-popover placement="right" width="40" trigger="hover">
					<div style="text-align: left; margin: 0; ">
						<el-button style="font-size: 18px" size="large" type="success" text @click="checkTurn(1)">个人信息</el-button>
						<el-button style="font-size: 18px" type="warning" size="large" text @click="dialogVisible = true">注销</el-button>
					</div>
					<template #reference>
						<el-avatar :size="100" :src="userinfo.data.picture" />
					</template>
				</el-popover>
			</div>

			<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{userinfo.data.username}}&nbsp;你好，欢迎来到图书管理系统，在这里，你可以：</span>
			<div class="buttonBox">
				<el-button size="large" type="primary" @click="checkTurn(2)">{{btn1Msg}}</el-button>
				<span></span>
				<el-button size="large" type="primary" @click="checkTurn(3)">{{btn2Msg}}</el-button>
			</div>
			<el-dialog v-model="dialogVisible" title="Tips" width="30%">
				<span>确认注销吗？</span>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="signOut">确认</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
		<img src="../assets/img/main/comunidad.svg" />
	</div>

</template>
 
<script>
import request from '../api/request'
import { useRouter } from "vue-router"
import { toRefs, ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
export default {
	setup() {
		const router = useRouter()
		// 获取用户信息，并动态渲染页面
		const userinfo = reactive({ data: {} })
		const btn1Msg = ref('借阅图书')
		const btn2Msg = ref('借阅情况')
		const getUserInfo = () => {
			request.get('/userMain').then((res) => {
				userinfo.data = res.data
				// 头像不为空，则获取头像
				if (res.data.picture) {
					userinfo.data.picture = res.data.picture
				}else{
                    userinfo.data.picture = '../../public/img/defaultPicture.png'
                }
				console.log(userinfo.data)
				if (res.data.admin == 1) {
					btn1Msg.value = '图书管理'
					btn2Msg.value = '用户管理'
				}
			})
		}
		getUserInfo()
		// 验证后的跳转
		const checkTurn = (nums) => {
			// 根据用户不同身份，跳转到不同页面
			switch (nums) {
				case 1: router.push('/userInfo')
					break
				case 2: if (userinfo.data.admin == 0) {
					router.push('/borrowingSystem')
				} else {
					router.push('/booksManage')
				}
					break
				case 3: if (userinfo.data.admin == 0) {
					router.push('/borrowedBooks')
				} else {
					router.push('/userManage')
				}
			}
		}

		// 用户注销
		const dialogVisible = ref(false)
		const signOut = () => {
			window.localStorage.clear()
			request.get('/signOut')
			ElMessage({
				type: 'success',
				message: '注销成功'
			})
			router.replace('/login')
		}


		return {
			userinfo,
			btn1Msg,
			btn2Msg,
			checkTurn,
			dialogVisible,
			signOut,
		}
	},
}
</script >
 
<style lang='less' scoped>
.content {
	padding-top: 10%;
	display: flex;
	flex-direction: row;
	.left {
		height: 800px;
		width: 400px;
		margin-left: 20%;
		.block {
			position: relative;
			left: 40%;
		}
		span {
			position: relative;
			top: 10%;
			text-align: center;
			font-size: 40px;
			-webkit-user-select: none;
			user-select: none;
		}
		.buttonBox {
			height: 220px;
			width: 390px;
			position: relative;
			top: 23%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			:deep(.el-button--large) {
				font-size: 28px;
				--el-button-size: 65px;
			}
		}
	}
	img {
		margin-left: 10%;
		width: 900px;
		height: 800px;
	}
}
</style>